<!-- 装修基础组件：宫格导航 -->
<template>
	<view>
		<uni-grid :showBorder="Boolean(false)" :column="5">
			<!-- <uni-grid-item @tap="sheep.$router.go('/pages/activity/groupon/list')">
				<view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
					<view class="img-box">
          <view class="tag-box" :style="[{ background: '#FF6000', color: '#fff' }]">2角标</view>
						<image class="menu-image" src="/static/images/icon/contacts.svg"></image>
					</view>
					<view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
						<view class="grid-text" :style="[{ color: '#333' }]">人员管理</view>
					</view>
				</view>
			</uni-grid-item> -->
      <uni-grid-item @tap="sheep.$router.go('/pages/money/gift-book-list')">
        <view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
          <view class="img-box">
            <image class="menu-image" src="/static/images/icon/gift_book.svg"></image>
          </view>
          <view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
            <view class="grid-text" :style="[{ color: '#333' }]">随礼账簿</view>
          </view>
        </view>
      </uni-grid-item>
      <uni-grid-item @tap="sheep.$router.go('/pages/money/borrow-list')">
        <view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
          <view class="img-box">
            <image class="menu-image" src="/static/images/icon/borrow_money.svg"></image>
          </view>
          <view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
            <view class="grid-text" :style="[{ color: '#333' }]">借钱管理</view>
          </view>
        </view>
      </uni-grid-item>
      <uni-grid-item @tap="sheep.$router.go('/pages/contact/memorial-list')">
        <view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
          <view class="img-box">
            <image class="menu-image" src="/static/images/icon/memorial.svg"></image>
          </view>
          <view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
            <view class="grid-text" :style="[{ color: '#333' }]">纪念日管理</view>
          </view>
        </view>
      </uni-grid-item>
      <uni-grid-item @tap="sheep.$router.go('/pages/contact/event-list')">
        <view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
          <view class="img-box">
            <image class="menu-image" src="/static/images/icon/event.svg"></image>
          </view>
          <view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
            <view class="grid-text" :style="[{ color: '#333' }]">事件管理</view>
          </view>
        </view>
      </uni-grid-item>
      <uni-grid-item @tap="showDevelopingTip">
        <view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
          <view class="img-box">
            <image class="menu-image" src="/static/images/icon/mass_sengding.svg"></image>
          </view>
          <view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
            <view class="grid-text" :style="[{ color: '#333' }]">群发助手</view>
          </view>
        </view>
      </uni-grid-item>
      <uni-grid-item @tap="sheep.$router.go('/pages/tool/ecard/index')">
        <view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
          <view class="img-box">
            <image class="menu-image" src="/static/images/icon/electronic_business_card.svg"></image>
          </view>
          <view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
            <view class="grid-text" :style="[{ color: '#333' }]">电子名片</view>
          </view>
        </view>
      </uni-grid-item>
      <uni-grid-item @tap="sheep.$router.go('/pages/tool/phone/call-simulator')">
        <view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
          <view class="img-box">
            <image class="menu-image" src="/static/images/icon/incoming_call.svg"></image>
          </view>
          <view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
            <view class="grid-text" :style="[{ color: '#333' }]">模拟来电</view>
          </view>
        </view>
      </uni-grid-item>
      <!-- <uni-grid-item @tap="sheep.$router.go('/pages/activity/groupon/list')">
        <view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
          <view class="img-box">
            <image class="menu-image" src="/static/images/icon/phonebook.svg"></image>
          </view>
          <view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
            <view class="grid-text" :style="[{ color: '#333' }]">常用电话</view>
          </view>
        </view>
      </uni-grid-item> -->
      <uni-grid-item @tap="showDevelopingTip">
        <view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
          <view class="img-box">
            <image class="menu-image" src="/static/images/icon/learn.svg"></image>
          </view>
          <view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
            <view class="grid-text" :style="[{ color: '#333' }]">社交学习</view>
          </view>
        </view>
      </uni-grid-item>
      <!-- <uni-grid-item @tap="sheep.$router.go('/pages/activity/groupon/list')">
        <view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
          <view class="img-box">
            <image class="menu-image" src="/static/images/icon/calendar.svg"></image>
          </view>
          <view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
            <view class="grid-text" :style="[{ color: '#333' }]">人脉日历</view>
          </view>
        </view>
      </uni-grid-item> -->
      <uni-grid-item @tap="showDevelopingTip">
        <view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
          <view class="img-box">
            <image class="menu-image" src="/static/images/icon/invite.svg"></image>
          </view>
          <view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
            <view class="grid-text" :style="[{ color: '#333' }]">电子请柬</view>
          </view>
        </view>
      </uni-grid-item>
      <uni-grid-item @tap="showDevelopingTip">
        <view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
          <view class="img-box">
            <image class="menu-image" src="/static/images/icon/personal.svg"></image>
          </view>
          <view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
            <view class="grid-text" :style="[{ color: '#333' }]">私人定制</view>
          </view>
        </view>
      </uni-grid-item>
      <uni-grid-item @tap="sheep.$router.go('/pages/tool/screenshot/index')">
        <view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
          <view class="img-box">
            <image class="menu-image" src="/static/images/icon/cut.svg"></image>
          </view>
          <view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
            <view class="grid-text" :style="[{ color: '#333' }]">截图制作</view>
          </view>
        </view>
      </uni-grid-item>
      <uni-grid-item @tap="showDevelopingTip">
        <view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
          <view class="img-box">
            <image class="menu-image" src="/static/images/icon/membership_benefits.svg"></image>
          </view>
          <view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
            <view class="grid-text" :style="[{ color: '#333' }]">会员福利</view>
          </view>
        </view>
      </uni-grid-item>
      <uni-grid-item @tap="showDevelopingTip">
        <view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
          <view class="img-box">
            <image class="menu-image" src="/static/images/icon/game.svg"></image>
          </view>
          <view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
            <view class="grid-text" :style="[{ color: '#333' }]">破冰游戏</view>
          </view>
        </view>
      </uni-grid-item>
      <!-- <uni-grid-item @tap="sheep.$router.go('/pages/activity/groupon/list')">
        <view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
          <view class="img-box">
            <image class="menu-image" src="/static/images/icon/blessing.svg"></image>
          </view>
          <view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
            <view class="grid-text" :style="[{ color: '#333' }]">匿名祝福</view>
          </view>
        </view>
      </uni-grid-item> -->

		</uni-grid>

	</view>

</template>

<script setup>
	import sheep from '@/sheep';
	import {
		computed
	} from 'vue';

	const props = defineProps({
		// 装修数据
		data: {
			type: Object,
			default: () => ({}),
		},
		// 装修样式
		styles: {
			type: Object,
			default: () => ({}),
		},
	});
	
	// 显示功能开发中提示
	const showDevelopingTip = () => {
		uni.showToast({
			title: '功能紧急开发中，敬请期待',
			icon: 'none',
			duration: 2000
		});
	};
	
	// 设置背景样式
	const bgStyle = computed(() => {
		// 直接从 props.styles 解构
		const {
			bgType,
			bgImg,
			bgColor
		} = props.styles;

		// 根据 bgType 返回相应的样式
		return {
			background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor
		};
	});
</script>

<style lang="scss" scoped>
	.menu-image {
		width: 24px;
		height: 24px;
	}

	.grid-item-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;

		.img-box {
			position: relative;

			.tag-box {
				position: absolute;
				z-index: 2;
				top: 0;
				right: 0;
				font-size: 2em;
				line-height: 1;
				padding: 0.4em 0.6em 0.3em;
				transform: scale(0.4) translateX(0.5em) translatey(-0.6em);
				transform-origin: 100% 0;
				border-radius: 200rpx;
				white-space: nowrap;
			}
		}

		.title-box {
			.grid-tip {
				font-size: 20rpx;
				white-space: nowrap;
				text-align: center;
			}
		}
	}

	.grid-text {
		font-size: 20rpx;
		color: #333;
		margin-top: 10rpx;
	}
</style>